<template>
  <div class="layout-wrapper">
    <Layout class="layout-outer">
      <Sider collapsible hide-trigger v-model="collapsed" breakpoint="md">
        <side-menu :collapsed="collapsed" :list="menuList">
          <div class="logo-con">
            <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
            <img v-show="collapsed" :src="minLogo" key="min-logo" />
          </div>
        </side-menu>
      </Sider>
      <Layout>
        <Header class="header-wrapper">
          <head-bar :collapsed="collapsed" @on-call-change="handleCollapsed">
            <user :user-avatar="avatar" :message-unread-count="0"/>
            <full-screen v-model="isFullScreen" style="margin-right: 10px;"/>
          </head-bar>
        </Header>
        <Content class="content-con">
          <Card shadow class="page-card">
            <router-view/>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import SideMenu from '_c/side-menu'
import HeadBar from '_c/header/head-bar'
import User from '_c/header/user'
import FullScreen from '_c/header/full-screen'
import minLogo from '@/assets/img/logo-min.png'
import maxLogo from '@/assets/img/logo.png'
export default {
  components: {
    SideMenu,
    HeadBar,
    User,
    FullScreen
  },
  data () {
    return {
      collapsed: false,
      avatar: 'https://spmv-02.oss-cn-beijing.aliyuncs.com/images/wfx.png',
      isFullScreen: false,
      minLogo,
      maxLogo
    }
  },
  computed: {
    triggerClassed () {
      return [
        'trigger-icon',
        this.collapsed ? 'rotate' : ''
      ]
    },
    menuList () {
      return this.$store.getters.menuList
    }
  },
  methods: {
    handleCollapsed (state) {
      this.collapsed = !this.collapsed
    }
  }
}
</script>

<style lang="less">
.layout-wrapper, .layout-outer{
  height: 100%;
  .header-wrapper{
    background: #fff;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .1);
    padding: 0 20px;
    width: 100%;
  }
  .content-con{
    padding: 10px;
  }
  .page-card{
    min-height: ~"calc(100vh - 84px)";
  }
}
.logo-con{
  width: 100%;
  height: 64px;
  padding: 10px 0;
  align-items: center;
  img{
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
  }
}
</style>
